[CSS] 16:9 등의 비율 ratio 적용하는 방법과 팁

웹페이지를 만들때 만약 16:9 등 원하는 화면 비율을 적용하려면 어떻게 할까요? CSS를 사용하여 비율로 화면을 적용하는 방법에 대하여 알아봅니다.

! 화면 16:9 비율이 언제 필요할까요

사실 16:9 비율이 필요한 경우는 크지 않습니다. 다만 웹사이트에서 자주 사용되는 경우는 아래와 같습니다.

• 동영상 및 사진 등 미디어 콘텐츠를 보여줄 경우
• 모바일 웹페이지인 경우 16:9 등의 비율로 고정할 경우

특히 미디어 콘텐츠 재생시 팝업창을 비율에 맞춰서 보여주는 경우가 가장 많습니다. 그럼 아래는 어떻게 구현하는지 알아봅니다.

# CSS를 사용하여 16 : 9 비율 적용하기

참고로 아래 예제는 16:9 이지만 비율값을 조정하면 언제든 원하는 비율로 만들 수 있습니다. 먼저 비율로 맞추기 위해서 두 가지 css 단위를 사용하려고 합니다. 바로 vw와 vh입니다.

width: 100vw; // Screen width 100% 크기의 값
height: 100vh; // Screen height 100% 크기의 값


vw, vh는 화면의 전체 크기를 100으로 가지는 설정 단위입니다. 즉 100vw는 100%만큼의 크기이며 50%를 설정하려면 50vw 또는 50vh가 되겠지요.

이처럼 vw, vh를 사용하면 Screen 크기를 맞춰 설정할 수 있어 CSS만으로 비율 설정이 가능하게 됩니다. 하지만 vw, vh 등의 screen 비율을 사용할 때 반드시 알아야 할 점이 있습니다.

@ 꼭 알아둘 것 !!
vw, vh는 전체 스크린 width와 height의 크기를 기준으로 합니다. 즉 전체 영역이 기준이 아니라면... 예를들어 부모 요소를 기준으로 하는 더 작은 비율을 원하는 경우 vw, vh를 적용하는 방법은 적용하기 어렵습니다. 이때는 다른 방법을 사용해야 합니다. 가장 많이 쓰이는 방법은 padding을 사용한 방법입니다.

> padding에 % 등을 사용하여 높이 값을 설정하는 방법은 아래 링크 클릭
https://webisfree.com/2019-03-11/css-백그라운드-이미지-및-엘리먼트-비율로-조절하기-aspect-ratio

! 화면 비율 vw, vh를 사용한 예제 소스 보기

그럼 vw, vh를 사용한 방법으로 예제를 만들어 보겠습니다. 먼저 #container 요소를 하나 만들고 그 안에 아래의 css를 적용합니다.

이제 아래의 css를 적용하도록 합니다.

여기서 width와 height 값만으로 16:9 설정이 가능합니다. 하지만 아래에 max-height와 max-width 값을 적용해야 width보다 height가 큰 경우에 screen을 벗어나지 않도록 최대 크기를 지정하게 됩니다.

이제 위 css를 적용한 화면을 실제로 구현해도록 하겠습니다. 이해를 돕기 위해서 아래의 버튼을 클릭하면 팝업이16:9 비율로 나타납니다. 직접 클릭 후 알아보세요.